<template>
  <div>
    <h3>promise test</h3>
    <a-button type="primary" @click="funPromise">funPromise</a-button>
    <a-button type="primary" @click="funPromiseAll">funPromiseAll</a-button>
    <a-button type="primary" @click="getApiData">await</a-button>
  </div>
  <div>
    <a-button type="primary" @click="funCase">await</a-button>
  </div>
</template>
<script lang="ts" setup>
// import { ref, reactive, onMounted } from 'vue'

// 模拟sleep方法
function sleep(ms: number, tagName: '' | {}) {
  return new Promise((resolve) => setTimeout(resolve, ms, tagName))
}

async function getApiData() {
  // 场景1：多个接口依赖第一个接口的返回结果，但彼此间没有依赖关系
  const st = Date.now()
  const res1 = await sleep(1000, 'promise1')
  const res2 = await sleep(2000, 'promise2')
  const res3 = await sleep(1500, 'promise3')
  console.log('getApiData执行时间差：', Date.now() - st)

  // const res1 = await sleep(1000, 'promise1')
  // const res2 = sleep(2000, 'promise2')
  // const res3 = sleep(1500, 'promise3')
  // console.log(`res1:${res1},res2:${res2},res3:${res3}`)
  // console.log('getApiData执行时间差：', Date.now() - st)

  // 场景2：输入参数来自多个接口的返回值
  // const res1 = await sleep(1000, 'promise1')
  // const res2 = await sleep(2000, 'promise2')
  // const res3 = await sleep(1500, 'promise3')
  // const res4 = await sleep(0, `res1:${res1},res2:${res2},res3:${res3}`)
  // console.log('res4=', res4)
  // console.log('getApiData执行时间：', Date.now() - st)

  // const res1 = sleep(1000, 'promise1')
  // const res2 = sleep(2000, 'promise2')
  // const res3 = sleep(1500, 'promise3')

  // Promise.all([res1, res2, res3]).then((values) => {
  //   console.log(values)
  //   const res4 = sleep(0, `res1:${res1},res2:${res2},res3:${res3}`)
  //   console.log('getApiData执行时间：', Date.now() - st)
  // })
}
const funPromise = () => {
  const st = Date.now()
  let promise1 = sleep(1000, 'promise1')

  promise1.then((values) => {
    console.log(values)
    console.log('promise1执行时间差：', Date.now() - st)
    let promise2 = sleep(2000, 'promise2')
    promise2.then((values) => {
      console.log(values)
      console.log('promise2执行时间差：', Date.now() - st)
    })
    let promise3 = sleep(1500, 'promise3')
    promise3.then((values) => {
      console.log(values)
      console.log('promise3执行时间差：', Date.now() - st)
    })
  })
}
const funPromiseAll = () => {
  const st = Date.now()
  let promise1 = sleep(1000, 'promise1')
  let promise2 = sleep(2000, 'promise2')
  let promise3 = sleep(1500, 'promise3')

  Promise.all([promise1, promise2, promise3]).then((values) => {
    console.log(values) // ['promise1', 'promise2', 'promise3']
    console.log('Promise.all的执行时间：', Date.now() - st)
  })
}
function funCase() {
  const a: string = '3'
  console.log('log内容getIfs', getIfs(a))
  console.log('log内容getArr', getArr('START'))
}
function getIfs(a: string) {
  if (a == '1') {
    return 'Code 1'
  } else if (a == '2') {
    return 'Code 2'
  } else if (a == '3') {
    return 'Code 3'
  }
}

const config = {
  isTransferTree: 1,
  initializeFlag: 2,
  showTime: 2
}
/**
 * 函数功能描述
 * @param code 入参说明
 * @returns 返回结果的类型
 */
function getArr(code: string) {
  const data = {
    one: 'Code one',
    two: 'Code two',
    three: 'Code three',
    four: 'background: #3296fa',
    ARCHIVE: 'background: #52c41a'
  }
  return data[code]
}
// console.log('script start')
// setTimeout(function () {
//   console.log('setTimeout')
// }, 0)
// Promise.resolve().then(function () {
//     console.log('promise1')
//   })
//   .then(function () {
//     console.log('promise2')
//   })
// console.log('script end')
</script>
<style lang="less" scoped></style>
